<template>
  <div class="dashboard-container">
    <div class="dashboard-text">主页</div>

    <div style="font-size: 24px">
      <span style="margin-left: 50%">当月收入为：{{ this.revenue }} 元</span>
      <el-date-picker
        v-model="months"
        type="month"
        value-format="yyyy-MM"
        placeholder="选择月" style="margin-left: 40px" @change="updateMonth"/>
<!--      <el-button type="primary" style="margin-left: 40px" @click="updateMonth">查询</el-button>-->
      <el-button @click="selectMonth" style="margin-left: 40px">重置</el-button>
    </div>


    <div style="margin-top: 50px">
      <div style="margin-left: 10px;float: left">
        <p style="margin-left: 250px;font-size: 32px">酒店入住率</p>
        <pieChart :data="this.pieData" style="margin-left: 150px"/>
      </div>
      <div style="margin-left: 50px;float: left">
        <p style="margin-left: 350px;font-size: 32px">半年内收入</p>
        <barChart :data="this.barData" style="margin-left: 150px"/>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import barChart from '@/components/barChart.vue'
import pieChart from '@/components/pieChart.vue'
import { selectLiveNumber, selectMoney, selectMoneyByMonth, selectRoomNumber } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components:{barChart,pieChart},
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 存放页面参数
  data() {
    return {
      roomNumber:'',
      liveNumber:'',
      pieData:[],
      months:'',
      revenue: '',
      barData:[],
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.createPieData()
    this.selectMonth()
  },
  // 页面的方法和事件
  methods: {
    selectMonth(){
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      if(month < 10 ){
        this.months = year + '-0' + month
      }else {
        this.months = year + '-' + month
      }
      this.selectMoney()
      this.selectMoneyByMonth()
    },
    selectMoney(){
      selectMoney({month: this.months}).then(
        response =>{
          this.revenue = response.data
          console.log(this.revenue)
        }
      )
    },
    selectMoneyByMonth(){
      selectMoneyByMonth({month: this.months}).then(
        response => {
          console.log(response.data)
          this.barData = [
            {label:response.data[5].month,value: response.data[5].money,color:'#000000'},
            {label:response.data[4].month,value: response.data[4].money,color:'#f66767'},
            {label:response.data[3].month,value: response.data[3].money,color:'#41a2af'},
            {label:response.data[2].month,value: response.data[2].money,color:'#9acb6d'},
            {label:response.data[1].month,value: response.data[1].money,color:'#c2a96a'},
            {label:response.data[0].month,value: response.data[0].money,color:'#62dac4'}
          ]
        }
      )
    },
    updateMonth(){
      this.selectMoney()
      this.selectMoneyByMonth()
    },
    async createPieData(){
      await this.selectLiveNumber()
      await this.selectRoomNumber()
      this.pieData = [
        {label:'已入住',value: this.liveNumber,color:'#000000'},
        {label:'未入住',value: this.roomNumber - this.liveNumber,color:'#ef6d6d'},
      ]
    },
    async selectRoomNumber(){
      await selectRoomNumber({}).then(
        response => {
          this.roomNumber = response.data
          console.log('房间数据:' + this.roomNumber)
        }
      )
    },
    async selectLiveNumber(){
      await selectLiveNumber({}).then(
        response => {
          this.liveNumber = response.data
          console.log('入住数据:' + this.liveNumber)
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
